<template>
    <div class="container-popup" @click="isCloseType ? '' : close()">
        <div class="container-c" :style="{ width: width }" @click.stop="">
            <div class="title">{{ dataTitle }}</div>
            <div class="close point" @click="close()">×</div>
            <div v-if="isRechargeOk">
                <div v-if="typeIndex === 0">
                    <div class="stepBox">
                        <div v-for="(item, i) in stepList" :key="i" class="stepItem">
                            <div class="stepPoint" v-if="item.hasNext">{{ i + 1 }}</div>
                            <div class="stepPointc" v-else>{{ i + 1 }}</div>
                            <div>{{ item.text }}</div>
                            <img class="next" v-if="item.hasNext" src="@/assets/long-insure/nextStep.png" alt="">
                        </div>
                    </div>
                    <div class="text-center">
                        <img class="statusImg" src="@/assets/long-insure/rechargeStatus.png" alt="">
                    </div>
                    <div class="text-center text-1989FA text-22">审核中</div>
                    <div class="text-center text-9497B1">工作日9: 00-18:00，3-5分钟到账</div>
                    <div class="text-center text-9497B1">周六周日，1-2小时到账</div>
                    <div class="text-center backBtn">
                        <el-button class="text-center text-1989FA" @click="close()">返回首页</el-button>
                    </div>
                </div>
                <div v-if="typeIndex === 1">
                    <div class="text-center pd-t-20">
                        <img class="statusImg" src="@/assets/long-insure/rechargeSuccess.png" alt="">
                    </div>
                    <div class="text-center text-9497B1 pd-t-20">充值成功，详情可查看账单</div>
                    <div class="text-center backBtn">
                        <el-button class="text-center text-1989FA" @click="onToBill">查看账单</el-button>
                    </div>
                </div>
            </div>
            <div class="info-box" v-if="!isRechargeOk">
                <div class="flex flex-center gap-16 mg-b-12">
                    <div
                        :class="['tab-i', 'align-items', 'justify-center', 'point', typeIndex == 0 ? 'tab-active' : '']"
                        @click="onSwitchTab(0)">
                        <img src="@/assets/long-insure/B2B.png" class="icon-img" alt="">
                        <div class="color-darkgrey font-mini">公对公充值</div>
                    </div>
                    <div
                        :class="['tab-i', 'align-items', 'justify-center', 'point', typeIndex == 1 ? 'tab-active' : '']"
                        @click="onSwitchTab(1)">
                        <img src="@/assets/long-insure/we-chat.png" class="icon-img" alt="">
                        <div class="color-darkgrey font-mini">微信充值</div>
                    </div>
                </div>
                <div v-if="typeIndex == 0" class="gridBox">
                    <div class="bToB-l">
                        <div class="steptext" v-if="dataTitle != '团意保'">第一步：对公转账</div>
                        <div class="bankMsgBox">
                            <div>
                                <div class="bold mg-b-10">账户信息</div>
                                <div class="align-items info-i ">
                                    <div class="color-grey font-base">企业全称：</div>
                                    <span class="color-darkgrey font-base"> {{ bankName }}</span>
                                </div>
                                <div class="align-items info-i">
                                    <div class="color-grey font-base">银行账号：</div>
                                    <span class="color-darkgrey font-base"> {{ bankNo }}</span>
                                </div>
                                <div class="align-items info-i">
                                    <span class="color-grey font-base">开 户 行 ：</span>
                                    <span class="color-darkgrey font-base"> {{ openBank }}</span>
                                </div>
                            </div>
                            <el-button type="primary" size="mini" class="w-100" @click="copyText">复制信息</el-button>
                        </div>
                    </div>
                    <div class="bToB-r" v-if="dataTitle != '团意保'">
                        <div class="steptext">第二步：上传付款回执及充值金额</div>
                        <div class="text-9497B1">上传凭证</div>
                        <div class="upload-box align-items mg-b-20">
                            <div class="upload point" v-if="dataTitle != '团意保'">
                                <img v-if="!fileValue" src="@/assets/long-insure/upload-add-icon.png" class="upload-img"
                                     alt="">
                                <div v-if="!fileValue" class="color-lightgray font-mini">点击上传付款回执，支持jpg、png
                                </div>
                                <img v-if="fileValue" :src="fileValue" class="upload-preview-img" alt="">
                                <!-- 隐藏起来覆盖到 添加付款凭证 上面 -->
                                <input type="file" ref="fileInput" @change="handleFileUpload" name="image"
                                       accept=".bmp,.jpg,.png,.tif,.gif,.pcx,.tga,.exif,.fpx,.svg,.psd,.cdr,.pcd,.dxf,.ufo,.eps,.ai,.raw,.WMF,.webp,.jpeg"
                                       class="fileInput"/>
                            </div>
                        </div>
                        <div class="text-9497B1 mg-b-10">请填写正确的充值金额，如分开充值，需分批次申请</div>
                        <div class="priceIptBox" v-if="dataTitle != '团意保'">
                            <div class="title bold mg-b-20">充值金额（元）</div>
                            <div class="priceIpt">
                                <div class="font-large bold">¥</div>
                                <el-input :class="{ 'ipt':true, 'text-red':ocrNum!==num}" v-model="num" @input="onNum"
                                          placeholder="请输入充值金额"/>
                            </div>
                        </div>
                        <div class="text-red" v-if="isRepeat">您已上传提交过相同金额的回执单</div>
                        <div class="text-red" v-if="!isRepeat && ocrNum!==num">请输入和回执单一致的金额</div>
                    </div>
                </div>
                <div v-if="typeIndex == 1">
                    <div>
                        <div class="text-9497B1 mg-b-10">请填写正确的充值金额，如分开充值，需分批次申请</div>
                        <div class="priceIptBox" v-if="dataTitle != '团意保'">
                            <div class="title bold mg-b-20">充值金额（元）</div>
                            <div class="priceIpt">
                                <div class="font-large bold">¥</div>
                                <el-input class="ipt" v-model="num" @input="onNum"
                                          placeholder="请输入充值金额"/>
                            </div>
                        </div>
                    </div>
                    <div class="flex gap-16">
                        <div class="recharge-code flex-no-shrink">
                            <div v-if="num" id="code" class="code"/>
                            <img v-if="!num" src="@/assets/long-insure/code-mh.png" class="code" alt="">
                        </div>
                        <div class="pd-t-24 flex flex-colum flex-center">
                            <div class=" mg-b-10">在线支付</div>
                            <div :class="['tab-i', 'align-items', 'justify-center', 'point', 'mg-b-24']">
                                <img src="@/assets/long-insure/we-chat.png" class="icon-img" alt="">
                                <div class="color-darkgrey font-mini">微信充值</div>
                            </div>
                            <div class="mg-b-24">应付金额<span class="text-FF7642">￥<span class="font-large">{{
                                    num || '0.0'
                                }}</span></span></div>
                            <div>
                                <!-- 距离二维码过期还<span class="text-FF7642">2分30秒</span> -->
                                打开手机端微信
                            </div>
                            <div>
                                <!-- 过期后请刷新页面重新获取二维码 -->
                                扫一扫继续付款
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="btn-box align-items justify-end" v-if="typeIndex == 0 && !isRechargeOk">
                <el-button size="large" class="btn" @click="close()">取消</el-button>
                <el-button size="large" type="primary" class="btn" @click="determine()">{{
                        dataTitle != '团意保' ? '提交' :
                            '确定'
                    }}
                </el-button>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { urlTobase64, shake } from '@/utils/util'
import { recharge, ocrReadRechargeAmountApi, checkRechargeAmountApi } from '@/api/home'
import { ElMessage } from 'element-plus'
import user from '@/utils/user'
import QRCode from 'qrcodejs2'
import clipboard from 'clipboard'

export default defineComponent({
    props: ['dataTitle', 'width', 'isCloseType', 'openBank', 'bankNo', 'bankName', 'useWay', 'lockArr'],
    data() {
        return {
            stepList: [
                {
                    text: '发起充值',
                    hasNext: true
                },
                {
                    text: '客服审核',
                    hasNext: true
                },
                {
                    text: '充值成功',
                    hasNext: false
                }
            ],
            isRechargeOk: false,
            typeIndex: 0,
            num: '',
            isRepeat: false,
            ocrNum: '',
            ocrImg: '',
            fileValue: '' as any,
            qrcode: '' as any,
            window: window as any
        }
    },
    methods: {
        copyText() {
            let text = `企业全称：${this.bankName};银行账号：${this.bankNo};开户行：${this.openBank}`
            clipboard.copy(text)
            ElMessage.success('复制成功')
        },
        onToBill() {
            this.close()
            this.$router.push('/longinsure/bill')
        },
        close() {
            this.$emit('close')
            this.$Bus.emit('close2', '关闭了吗')
        },
        determine() {
            this.$emit('determine', this.num, this.ocrNum, this.ocrImg, this.isRepeat ? 1 : 0)
            this.isRechargeOk = true
        },
        onSwitchTab(event: number) {
            if (event === 1 && this.lockArr) {
                const arr = this.lockArr.filter((item: string) => item === '微信充值')
                if (arr.length > 0) {
                    this.$message.error('当前不支持' + arr[0])
                    return
                }
            }
            this.typeIndex = event
            if (Number(this.typeIndex) === 1) {
                this.num = ''
                // this.getRecharge()
            }
            this.num = ''
        },
        generateQRCode(url: { codeUrl: string }) {
            this.window.document.getElementById('code').innerHTML = ''
            this.qrcode = new QRCode('code', {
                text: url.codeUrl, // 二维码所携带的数据
                width: 180, // 二维码宽度
                height: 180 // 二维码高度
            })
        },
        async getRecharge() {
            const result = await recharge({
                amount: { total: this.num },
                total: this.num,
                description: '账户充值',
                mchid: user.wechatMchId,
                useWay: this.useWay
            })
            await this.generateQRCode(result)
        },
        // 获取本地img图片
        async handleFileUpload(event: any) {
            console.log(await urlTobase64(event))
            const code: any = await urlTobase64(event)
            console.log(code.split(',')[0].split('/')[0].split(':')[1])
            const flag = code.split(',')[0].split('/')[0].split(':')[1]
            if (flag === 'image') {
                let resoult = await ocrReadRechargeAmountApi({ voucherUrl: code.split(',')[1] })
                console.log(resoult, 'gfsdugyhfsd')
                this.num = resoult.ocrAmount
                this.ocrNum = resoult.ocrAmount
                this.ocrImg = resoult.ocrUrl
                this.fileValue = await urlTobase64(event)
                checkRechargeAmountApi({ rechargeAmount: resoult.ocrAmount }).then((res) => {
                    if (res === true) {
                        this.isRepeat = res
                    } else {
                        this.isRepeat = res.data
                    }
                })
            } else {
                console.log('false')
                ElMessage.error('请选择图片上传')
            }
        },
        onNum(event: string) {
            console.log(111)
            if (this.num.length === 0) {
                this.$message.error('请输入内容')
                return
            }
            if (Number(this.num) < 0) {
                this.$message.error('输入金额不可小于0元')
                return
            }
            // this.num = this.num.replace(/0/g, '')
            if (this.typeIndex === 1) {
                shake((): any => {
                    this.num = this.num.replace(/[^\d]/g, '').replace(/\./g, '')
                    this.getRecharge()
                })
            }
            if (this.typeIndex === 0) {
                shake((): any => {
                    checkRechargeAmountApi({ rechargeAmount: this.num }).then((res) => {
                        console.log(res, 'u还不够hi科技苏打火机更大说法卡拉季个等级考拉很尬科技溜达鸡考拉')
                        if (res === true) {
                            this.isRepeat = res
                        } else {
                            this.isRepeat = res.data
                        }
                    })
                }, 1000)
            }
        }
    }
})
</script>

<style scoped lang="stylus">
.container-popup
    width 100vw
    height 100vh
    background rgba(32, 37, 54, 0.6)
    position fixed
    top 0
    left 0
    flex-center()
    z-index 110

.container-c
    min-width 522px
    max-height 90vh
    overflow auto
    background white
    box-shadow 0px 2px 12px 0px rgba(0, 0, 0, 0.06)
    border-radius 8px
    border 1px solid #E4E7ED
    position relative

.container-c::-webkit-scrollbar
    width 10px
    height 1px

.container-c::-webkit-scrollbar-thumb
    border-radius 10px
    box-shadow inset 0 0 5px rgba(0, 0, 0, 0.2)
    background #ccc

.container-c::-webkit-scrollbar-track
    box-shadow inset 0 0 5px rgba(0, 0, 0, 0.2)
    border-radius 10px
    background #ededed

.title
    padding 28px 24px 20px 24px
    text-align left
    font-size font-normal
    font-weight bold
    color #303133
    border-bottom 1px solid rgba(216, 216, 216, 0.5)

.close
    position absolute
    right 20px
    top 16px
    font-size 28px
    color color-grey
    z-index 1000

.info-box
    padding 24px 32px
    box-sizing border-box

    .info-i
        margin-bottom 24px

    .title
        margin-right 22px
        border none
        padding 0
        font-size 14px
        font-weight normal
        flex none

    .unit
        margin-left 8px

    .tab-i
        width 148px
        height 38px
        border 1px solid #EAEAEF
        font-weight 600

    .tab-active
        width 148px
        height 38px
        background #F1FDFF
        border 1px solid #1989FA
        position relative

    .subscript-img
        width 24px
        height 24px
        position absolute
        top 0
        left 0

    .icon-img
        width 20px
        height 20px
        margin-right 4px

    .upload-box
        margin-top 10px

    .upload
        width 100%
        height 140px
        border 1px dashed #D9D9D9
        border-radius 8px
        margin-right 24px
        display flex
        flex-direction column
        justify-content center
        align-items center
        position relative

        .upload-img
            width 72px
            height 46px
            margin-bottom 12px

        .fileInput
            opacity 0
            position absolute
            height 100%
            width 100%
            top 0
            left 0

            /deep/ .el-input__inner
                height 100%
                width 100%

        .upload-preview-img
            width auto
            height 100%
            border-radius 8px

    .info-i
        margin-bottom 14px

.btn-box
    padding 16px 0 32px 0

.recharge-code
    padding 25px 25px 12px 25px
    box-sizing border-box
    border 1px solid #EAEAEF
    margin-top 24px

    .code
        width 180px
        height 180px
        margin-bottom 21px

.gap-32
    gap 32px

.bToB-l
    width 410px
    height 100%
    display flex
    flex-direction column

.steptext
    font-size 16px
    color #202536
    margin-bottom 30px

.bankMsgBox
    width 100%
    flex 1
    box-sizing border-box
    background-color #F9FAFB
    border-radius 8px
    padding 20px
    display flex
    flex-direction column
    justify-content space-between

.w-100
    width 100px

.gridBox
    display grid
    grid-template-columns 1fr 1fr
    column-gap 20px

.text-9497B1
    color #9497B1

.priceIptBox
    width 100%
    background-color #FAFAFC
    border-radius 8px
    padding 16px 12px

.priceIpt
    width 100%
    display flex
    align-items center

    .ipt
        border none !important

    /deep/ .el-input__inner
        height 38px
        font-size 14px
        border-radius 0
        border none
        background-color #fafafa
        font-size 24px

.justify-end
    justify-content flex-end
    padding-right 24px

.pd-t-24
    padding-top 24px

.flex-colum
    flex-direction column
    justify-content center

.text-FF7642
    color #FF7642

.stepBox
    padding 20px 0 30px
    width 904px
    boxs-sizing border-box
    display flex
    align-items center
    justify-content center
    gap 20px

    .stepItem
        display flex
        align-items center

        .stepPoint
            width 38px
            height 38px
            border-radius 50%
            background-color rgba(0, 214, 121, 0.1)
            font-size 22px
            color rgb(0, 214, 121)
            display flex
            align-items center
            justify-content center
            margin-right 6px

        .stepPointc
            width 38px
            height 38px
            border-radius 50%
            background-color rgba(148, 151, 177, 0.1)
            font-size 22px
            color #9497B1
            display flex
            align-items center
            justify-content center
            margin-right 6px

        .next
            margin-left 24px
            width 24px
            height 24px

.statusImg
    width 162px
    height 159px

.text-center
    text-align center

.text-1989FA
    color #1989FA

.text-22
    font-size 22px

.backBtn
    padding 44px 0 83px 0

.text-red
    color #FF7642 !important
</style>
